import { ElementRef, memo, ReactElement, useRef } from "react";
import type { FC } from "react";
import { SwiperBannerWrapper } from "@/styles/swiper-banner";
import { Carousel } from "antd";
import { IBanner } from "../type/homeType";
import Image from "next/image";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";

interface IProps {
  children?: ReactElement;
  bannerLists?: IBanner[];
}

const SwiperBanner: FC<IProps> = memo(function (props) {
  const { bannerLists } = props;
  const bannerRef = useRef<ElementRef<typeof Carousel>>(null);
  function handlePrevPage() {
    bannerRef.current?.prev();
  }
  function handleNextPage() {
    bannerRef.current?.next();
  }
  return (
    <SwiperBannerWrapper>
      <Carousel ref={bannerRef} autoplay autoplaySpeed={3000} effect="fade">
        {bannerLists?.map((item) => {
          return (
            <div className="bannersItem" key={item.id}>
              <div
                className="bg"
                style={{
                  backgroundImage: `url(${item.backendPicStr})`,
                }}
              ></div>
              <Image
                className="img"
                width={1100}
                height={480}
                src={item.picStr}
                alt=""
              />
            </div>
          );
        })}
      </Carousel>
      {/* 切换器 */}
      <div className="leftIcon">
        <LeftOutlined
          style={{ fontSize: "40px", color: "rgba(255,255,255,.8)" }}
          onClick={handlePrevPage}
        />
      </div>
      <div className="rightIcon">
        <RightOutlined
          style={{ fontSize: "40px", color: "rgba(255,255,255,.8)" }}
          onClick={handleNextPage}
        />
      </div>
    </SwiperBannerWrapper>
  );
});

export default SwiperBanner;
SwiperBanner.displayName = "SwiperBanner";
